<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/dnd.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:28 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=interaction.html>← 6 User interaction</a> — <a href=index.html>Table of Contents</a> — <a href=popover.html>6.12 The popover attribute →</a></nav><ol class=toc><li><ol><li><a href=dnd.html#dnd><span class=secno>6.11</span> Drag and drop</a><ol><li><a href=dnd.html#event-drag><span class=secno>6.11.1</span> Introduction</a><li><a href=dnd.html#the-drag-data-store><span class=secno>6.11.2</span> The drag data store</a><li><a href=dnd.html#the-datatransfer-interface><span class=secno>6.11.3</span> The <code>DataTransfer</code> interface</a><ol><li><a href=dnd.html#the-datatransferitemlist-interface><span class=secno>6.11.3.1</span> The <code>DataTransferItemList</code> interface</a><li><a href=dnd.html#the-datatransferitem-interface><span class=secno>6.11.3.2</span> The <code>DataTransferItem</code> interface</a></ol><li><a href=dnd.html#the-dragevent-interface><span class=secno>6.11.4</span> The <code>DragEvent</code> interface</a><li><a href=dnd.html#dndevents><span class=secno>6.11.5</span> Events summary</a><li><a href=dnd.html#the-draggable-attribute><span class=secno>6.11.6</span> The <code>draggable</code> attribute</a></ol></ol></ol><h3 id=dnd><span class=secno>6.11</span> <dfn>Drag and drop</dfn><a href=#dnd class=self-link></a></h3><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API title="HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers.">HTML_Drag_and_Drop_API</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>2+</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>18+</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>1.5+</span></span><span class="opera_android yes"><span>Opera Android</span><span>14+</span></span></div></div></div>



  <p>This section defines an event-based drag-and-drop mechanism.</p>

  <p>This specification does not define exactly what a <em>drag-and-drop operation</em> actually
  is.</p>

  <p>On a visual medium with a pointing device, a drag operation could be the default action of a
  <code id=dnd:event-mousedown><a data-x-internal=event-mousedown href=https://w3c.github.io/uievents/#event-type-mousedown>mousedown</a></code> event that is followed by a series of <code id=dnd:event-mousemove><a data-x-internal=event-mousemove href=https://w3c.github.io/uievents/#event-type-mousemove>mousemove</a></code> events, and the drop could be triggered by the mouse
  being released.</p>

  <p>When using an input modality other than a pointing device, users would probably have to
  explicitly indicate their intention to perform a drag-and-drop operation, stating what they wish
  to drag and where they wish to drop it, respectively.</p>

  


  <h4 id=event-drag><span class=secno>6.11.1</span> Introduction<a href=#event-drag class=self-link></a></h4>

  

  <p>To make an element draggable, give the element a <code id=event-drag:attr-draggable><a href=#attr-draggable>draggable</a></code>
  attribute, and set an event listener for <code id=event-drag:event-dnd-dragstart><a href=#event-dnd-dragstart>dragstart</a></code> that
  stores the data being dragged.</p>

  <p>The event handler typically needs to check that it's not a text selection that is being
  dragged, and then needs to store data into the <code>DataTransfer</code> object and set the
  allowed effects (copy, move, link, or some combination).</p>

  <p>For example:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->What fruits do you like?<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ol</c-> <c- e>ondragstart</c-><c- o>=</c-><c- s>&quot;dragStartHandler(event)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-> <c- e>draggable</c-><c- o>=</c-><c- s>&quot;true&quot;</c-> <c- e>data-value</c-><c- o>=</c-><c- s>&quot;fruit-apple&quot;</c-><c- p>&gt;</c->Apples<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-> <c- e>draggable</c-><c- o>=</c-><c- s>&quot;true&quot;</c-> <c- e>data-value</c-><c- o>=</c-><c- s>&quot;fruit-orange&quot;</c-><c- p>&gt;</c->Oranges<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-> <c- e>draggable</c-><c- o>=</c-><c- s>&quot;true&quot;</c-> <c- e>data-value</c-><c- o>=</c-><c- s>&quot;fruit-pear&quot;</c-><c- p>&gt;</c->Pears<c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>ol</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>var</c-> internalDNDType <c- o>=</c-> <c- t>&apos;text/x-example&apos;</c-><c- p>;</c-> <c- c1>// set this to something specific to your site</c->
  <c- a>function</c-> dragStartHandler<c- p>(</c->event<c- p>)</c-> <c- p>{</c->
    <c- k>if</c-> <c- p>(</c->event<c- p>.</c->target <c- k>instanceof</c-> HTMLLIElement<c- p>)</c-> <c- p>{</c->
      <c- c1>// use the element&apos;s data-value=&quot;&quot; attribute as the value to be moving:</c->
      event<c- p>.</c->dataTransfer<c- p>.</c->setData<c- p>(</c->internalDNDType<c- p>,</c-> event<c- p>.</c->target<c- p>.</c->dataset<c- p>.</c->value<c- p>);</c->
      event<c- p>.</c->dataTransfer<c- p>.</c->effectAllowed <c- o>=</c-> <c- t>&apos;move&apos;</c-><c- p>;</c-> <c- c1>// only allow moves</c->
    <c- p>}</c-> <c- k>else</c-> <c- p>{</c->
      event<c- p>.</c->preventDefault<c- p>();</c-> <c- c1>// don&apos;t allow selection to be dragged</c->
    <c- p>}</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  <hr>

  <p>To accept a drop, the drop target has to listen to the following events:</p>

  <ol><li>The <code id=event-drag:event-dnd-dragenter><a href=#event-dnd-dragenter>dragenter</a></code> event handler reports
    whether or not the drop target is potentially willing to accept the drop, by canceling the
    event.<li>The <code id=event-drag:event-dnd-dragover><a href=#event-dnd-dragover>dragover</a></code> event handler specifies what feedback
    will be shown to the user, by setting the <code id=event-drag:dom-datatransfer-dropeffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute of the
    <code>DataTransfer</code> associated with the event. This event also needs to be canceled.<li>The <code id=event-drag:event-dnd-drop><a href=#event-dnd-drop>drop</a></code> event handler has a final chance to accept or
    reject the drop. If the drop is accepted, the event handler must perform the drop operation on
    the target. This event needs to be canceled, so that the <code id=event-drag:dom-datatransfer-dropeffect-2><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute's value can be used by the
    source. Otherwise, the drop operation is rejected.</ol>

  <p>For example:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Drop your favorite fruits below:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ol</c-> <c- e>ondragenter</c-><c- o>=</c-><c- s>&quot;dragEnterHandler(event)&quot;</c-> <c- e>ondragover</c-><c- o>=</c-><c- s>&quot;dragOverHandler(event)&quot;</c->
    <c- e>ondrop</c-><c- o>=</c-><c- s>&quot;dropHandler(event)&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>ol</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>var</c-> internalDNDType <c- o>=</c-> <c- t>&apos;text/x-example&apos;</c-><c- p>;</c-> <c- c1>// set this to something specific to your site</c->
  <c- a>function</c-> dragEnterHandler<c- p>(</c->event<c- p>)</c-> <c- p>{</c->
    <c- a>var</c-> items <c- o>=</c-> event<c- p>.</c->dataTransfer<c- p>.</c->items<c- p>;</c->
    <c- k>for</c-> <c- p>(</c-><c- a>var</c-> i <c- o>=</c-> <c- mf>0</c-><c- p>;</c-> i <c- o>&lt;</c-> items<c- p>.</c->length<c- p>;</c-> <c- o>++</c->i<c- p>)</c-> <c- p>{</c->
      <c- a>var</c-> item <c- o>=</c-> items<c- p>[</c->i<c- p>];</c->
      <c- k>if</c-> <c- p>(</c->item<c- p>.</c->kind <c- o>==</c-> <c- t>&apos;string&apos;</c-> <c- o>&amp;&amp;</c-> item<c- p>.</c->type <c- o>==</c-> internalDNDType<c- p>)</c-> <c- p>{</c->
        event<c- p>.</c->preventDefault<c- p>();</c->
        <c- k>return</c-><c- p>;</c->
      <c- p>}</c->
    <c- p>}</c->
  <c- p>}</c->
  <c- a>function</c-> dragOverHandler<c- p>(</c->event<c- p>)</c-> <c- p>{</c->
    event<c- p>.</c->dataTransfer<c- p>.</c->dropEffect <c- o>=</c-> <c- t>&apos;move&apos;</c-><c- p>;</c->
    event<c- p>.</c->preventDefault<c- p>();</c->
  <c- p>}</c->
  <c- a>function</c-> dropHandler<c- p>(</c->event<c- p>)</c-> <c- p>{</c->
    <c- a>var</c-> li <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;li&apos;</c-><c- p>);</c->
    <c- a>var</c-> data <c- o>=</c-> event<c- p>.</c->dataTransfer<c- p>.</c->getData<c- p>(</c->internalDNDType<c- p>);</c->
    <c- k>if</c-> <c- p>(</c->data <c- o>==</c-> <c- t>&apos;fruit-apple&apos;</c-><c- p>)</c-> <c- p>{</c->
      li<c- p>.</c->textContent <c- o>=</c-> <c- t>&apos;Apples&apos;</c-><c- p>;</c->
    <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c->data <c- o>==</c-> <c- t>&apos;fruit-orange&apos;</c-><c- p>)</c-> <c- p>{</c->
      li<c- p>.</c->textContent <c- o>=</c-> <c- t>&apos;Oranges&apos;</c-><c- p>;</c->
    <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c->data <c- o>==</c-> <c- t>&apos;fruit-pear&apos;</c-><c- p>)</c-> <c- p>{</c->
      li<c- p>.</c->textContent <c- o>=</c-> <c- t>&apos;Pears&apos;</c-><c- p>;</c->
    <c- p>}</c-> <c- k>else</c-> <c- p>{</c->
      li<c- p>.</c->textContent <c- o>=</c-> <c- t>&apos;Unknown Fruit&apos;</c-><c- p>;</c->
    <c- p>}</c->
    event<c- p>.</c->target<c- p>.</c->appendChild<c- p>(</c->li<c- p>);</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  <hr>

  <p>To remove the original element (the one that was dragged) from the display, the <code id=event-drag:event-dnd-dragend><a href=#event-dnd-dragend>dragend</a></code> event can be used.</p>

  <p>For our example here, that means updating the original markup to handle that event:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->What fruits do you like?<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ol</c-> <c- e>ondragstart</c-><c- o>=</c-><c- s>&quot;dragStartHandler(event)&quot;</c-> <c- e>ondragend</c-><c- o>=</c-><c- s>&quot;dragEndHandler(event)&quot;</c-><c- p>&gt;</c->
 <em>...as before...</em>
<c- p>&lt;/</c-><c- f>ol</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>function</c-> dragStartHandler<c- p>(</c->event<c- p>)</c-> <c- p>{</c->
    <c- c1>// </c-><em><c- c1>...as before...</c-></em>
  <c- p>}</c->
  <c- a>function</c-> dragEndHandler<c- p>(</c->event<c- p>)</c-> <c- p>{</c->
    <c- k>if</c-> <c- p>(</c->event<c- p>.</c->dataTransfer<c- p>.</c->dropEffect <c- o>==</c-> <c- t>&apos;move&apos;</c-><c- p>)</c-> <c- p>{</c->
      <c- c1>// remove the dragged element</c->
      event<c- p>.</c->target<c- p>.</c->parentNode<c- p>.</c->removeChild<c- p>(</c->event<c- p>.</c->target<c- p>);</c->
    <c- p>}</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>



  <h4 id=the-drag-data-store><span class=secno>6.11.2</span> The drag data store<a href=#the-drag-data-store class=self-link></a></h4>

  <p>The data that underlies a drag-and-drop operation, known as the <dfn id=drag-data-store>drag data store</dfn>,
  consists of the following information:</p>

  <ul><li><p>A <dfn id=drag-data-store-item-list>drag data store item list</dfn>, which is a list of items representing the dragged
   data, each consisting of the following information:</p>

    <dl><dt><dfn id=the-drag-data-item-kind>The drag data item kind</dfn><dd>
      <p>The kind of data:</p>

      <dl><dt><i>Text</i><dd>
        <p>Text.</p>
       <dt><i>File</i><dd>
        <p>Binary data with a filename.</p>
       </dl>
     <dt><dfn id=the-drag-data-item-type-string>The drag data item type string</dfn><dd>
      <p>A Unicode string giving the type or format of the data, generally given by a <a id=the-drag-data-store:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME
      type</a>. Some values that are not <a href=https://mimesniff.spec.whatwg.org/#mime-type id=the-drag-data-store:mime-type-2 data-x-internal=mime-type>MIME types</a> are
      special-cased for legacy reasons. The API does not enforce the use of <a href=https://mimesniff.spec.whatwg.org/#mime-type id=the-drag-data-store:mime-type-3 data-x-internal=mime-type>MIME types</a>; other values can be used as well. In all cases, however, the values
      are all <a id=the-drag-data-store:converted-to-ascii-lowercase href=https://infra.spec.whatwg.org/#ascii-lowercase data-x-internal=converted-to-ascii-lowercase>converted to ASCII lowercase</a> by the API.</p>

      <p>There is a limit of one <i>text</i> item per <a href=#the-drag-data-item-type-string id=the-drag-data-store:the-drag-data-item-type-string>item type string</a>.</p> 
     <dt>The actual data<dd><p>A Unicode or binary string, in some cases with a filename (itself a Unicode string),
      as per <a href=#the-drag-data-item-kind id=the-drag-data-store:the-drag-data-item-kind>the drag data item kind</a>.</dl>

    <p>The <a href=#drag-data-store-item-list id=the-drag-data-store:drag-data-store-item-list>drag data store item list</a> is ordered in the order that the items were added
    to the list; most recently added last.</p>
   <li>
    <p>The following information, used to generate the UI feedback during the drag:</p>

    <ul><li>User-agent-defined default feedback information, known as the <dfn id=drag-data-store-default-feedback>drag data store default
     feedback</dfn>.<li>Optionally, a bitmap image and the coordinate of a point within that image, known as the
     <dfn id=drag-data-store-bitmap>drag data store bitmap</dfn> and <dfn id=drag-data-store-hot-spot-coordinate>drag data store hot spot coordinate</dfn>.</ul>
   <li>
    <p>A <dfn id=drag-data-store-mode>drag data store mode</dfn>, which is one of the following:</p>

    <dl><dt><dfn id=concept-dnd-rw>Read/write mode</dfn><dd>
      <p>For the <code id=the-drag-data-store:event-dnd-dragstart><a href=#event-dnd-dragstart>dragstart</a></code> event. New data can be added to the
      <a href=#drag-data-store id=the-drag-data-store:drag-data-store>drag data store</a>.</p>
     <dt><dfn id=concept-dnd-ro>Read-only mode</dfn><dd>
      <p>For the <code id=the-drag-data-store:event-dnd-drop><a href=#event-dnd-drop>drop</a></code> event. The list of items representing dragged
      data can be read, including the data. No new data can be added.</p>
     <dt><dfn id=concept-dnd-p>Protected mode</dfn><dd>
      <p>For all other events. The formats and kinds in the <a href=#drag-data-store id=the-drag-data-store:drag-data-store-2>drag data store</a> list of
      items representing dragged data can be enumerated, but the data itself is unavailable and no
      new data can be added.</p>
     </dl>
   <li>
    <p>A <dfn id=drag-data-store-allowed-effects-state>drag data store allowed effects state</dfn>, which is a string.</p>
   </ul>

  <p>When a <a href=#drag-data-store id=the-drag-data-store:drag-data-store-3>drag data store</a> is <dfn id=create-a-drag-data-store>created</dfn>, it
  must be initialized such that its <a href=#drag-data-store-item-list id=the-drag-data-store:drag-data-store-item-list-2>drag data store item list</a> is empty, it has no
  <a href=#drag-data-store-default-feedback id=the-drag-data-store:drag-data-store-default-feedback>drag data store default feedback</a>, it has no <a href=#drag-data-store-bitmap id=the-drag-data-store:drag-data-store-bitmap>drag data store bitmap</a> and
  <a href=#drag-data-store-hot-spot-coordinate id=the-drag-data-store:drag-data-store-hot-spot-coordinate>drag data store hot spot coordinate</a>, its <a href=#drag-data-store-mode id=the-drag-data-store:drag-data-store-mode>drag data store mode</a> is <a href=#concept-dnd-p id=the-drag-data-store:concept-dnd-p>protected mode</a>, and its <a href=#drag-data-store-allowed-effects-state id=the-drag-data-store:drag-data-store-allowed-effects-state>drag data store allowed effects
  state</a> is the string "<code>uninitialized</code>".</p>


  <h4 id=the-datatransfer-interface><span class=secno>6.11.3</span> The <code>DataTransfer</code> interface<a href=#the-datatransfer-interface class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer title="The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see HTML Drag and Drop API.">DataTransfer</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div>

  <p><code>DataTransfer</code> objects are used to expose the <a href=#drag-data-store id=the-datatransfer-interface:drag-data-store>drag data store</a> that
  underlies a drag-and-drop operation.</p>

  

  <dl class=domintro><dt><code><var>dataTransfer</var> = new <span id=dom-datatransfer>DataTransfer</span>()</code><dd>
    <p>Creates a new <code>DataTransfer</code> object with an empty <a href=#drag-data-store id=the-datatransfer-interface:drag-data-store-2>drag data
    store</a>.</p>
   <dt><code><var>dataTransfer</var>.<span id=dom-datatransfer-dropeffect>dropEffect</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the kind of operation that is currently selected. If the kind of operation isn't one
    of those that is allowed by the <code id=the-datatransfer-interface:dom-datatransfer-effectallowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> attribute, then the operation will
    fail.</p>

    <p>Can be set, to change the selected operation.</p>

    <p>The possible values are "<code>none</code>", "<code>copy</code>", "<code>link</code>", and "<code>move</code>".</p>
   <dt><code><var>dataTransfer</var>.<span id=dom-datatransfer-effectallowed>effectAllowed</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the kinds of operations that are to be allowed.</p>

    <p>Can be set (during the <code id=the-datatransfer-interface:event-dnd-dragstart><a href=#event-dnd-dragstart>dragstart</a></code> event), to change
    the allowed operations.</p>

    <p>The possible values are "<code>none</code>",
    "<code>copy</code>", "<code>copyLink</code>", "<code>copyMove</code>", "<code>link</code>", "<code>linkMove</code>", "<code>move</code>", "<code>all</code>", and "<code>uninitialized</code>",</p>
   <dt><code><var>dataTransfer</var>.<span id=dom-datatransfer-items>items</span></code><dd><p>Returns a <code>DataTransferItemList</code> object, with the drag data.<dt><code><var>dataTransfer</var>.<span id=dom-datatransfer-setdragimage>setDragImage</span>(<var>element</var>, <var>x</var>, <var>y</var>)</code><dd>
    <p>Uses the given element to update the drag feedback, replacing any previously specified
    feedback.</p>
   <dt><code><var>dataTransfer</var>.<span id=dom-datatransfer-types>types</span></code><dd>
    <p>Returns a <a id=the-datatransfer-interface:frozen-array href=https://webidl.spec.whatwg.org/#dfn-frozen-array-type data-x-internal=frozen-array>frozen array</a> listing the formats that were set in the <code id=the-datatransfer-interface:event-dnd-dragstart-2><a href=#event-dnd-dragstart>dragstart</a></code> event. In addition, if any files are being
    dragged, then one of the types will be the string "<code>Files</code>".</p>
   <dt><code><var>data</var> = <var>dataTransfer</var>.<span id=dom-datatransfer-getdata>getData</span>(<var>format</var>)</code><dd><p>Returns the specified data. If there is no such data, returns the empty string.<dt><code><var>dataTransfer</var>.<span id=dom-datatransfer-setdata>setData</span>(<var>format</var>, <var>data</var>)</code><dd><p>Adds the specified data.<dt><code><var>dataTransfer</var>.<span id=dom-datatransfer-cleardata>clearData</span>([ <var>format</var> ])</code><dd><p>Removes the data of the specified formats. Removes all data if the argument is
   omitted.<dt><code><var>dataTransfer</var>.<span id=dom-datatransfer-files>files</span></code><dd><p>Returns a <code id=the-datatransfer-interface:filelist><a data-x-internal=filelist href=https://w3c.github.io/FileAPI/#filelist-section>FileList</a></code> of the files being dragged, if any.</dl>

  <p><code>DataTransfer</code> objects that are created as part of <a href=#dndevents>drag-and-drop events</a> are only valid while those events are being fired.</p>

  


  <h5 id=the-datatransferitemlist-interface><span class=secno>6.11.3.1</span> The <code>DataTransferItemList</code> interface<a href=#the-datatransferitemlist-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItemList title="The DataTransferItemList object is a list of DataTransferItem objects representing items being dragged. During a drag operation, each DragEvent has a dataTransfer property and that property is a DataTransferItemList.">DataTransferItemList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>50+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>13+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>14+</span></span></div></div></div>

  <p>Each <code>DataTransfer</code> object is associated with a <code>DataTransferItemList</code>
  object.</p>

  

  <dl class=domintro><dt><code><var>items</var>.<span id=dom-datatransferitemlist-length>length</span></code><dd><p>Returns the number of items in the <a href=#drag-data-store id=the-datatransferitemlist-interface:drag-data-store>drag data store</a>.<dt><code><var>items</var>[<var>index</var>]</code><dd>
    <p>Returns the <code>DataTransferItem</code> object representing the <var>index</var>th entry in
    the <a href=#drag-data-store id=the-datatransferitemlist-interface:drag-data-store-2>drag data store</a>.</p>
   <dt><code><var>items</var>.<span id=dom-datatransferitemlist-remove>remove</span>(<var>index</var>)</code><dd><p>Removes the <var>index</var>th entry in the <a href=#drag-data-store id=the-datatransferitemlist-interface:drag-data-store-3>drag data store</a>.<dt><code><var>items</var>.<span id=dom-datatransferitemlist-clear>clear</span>()</code><dd><p>Removes all the entries in the <a href=#drag-data-store id=the-datatransferitemlist-interface:drag-data-store-4>drag data store</a>.<dt><code><var>items</var>.<span id=dom-datatransferitemlist-add>add</span>(<var>data</var>)</code><dt><code><var>items</var>.<a href=#dom-datatransferitemlist-add id=the-datatransferitemlist-interface:dom-datatransferitemlist-add>add</a>(<var>data</var>, <var>type</var>)</code><dd>
    <p>Adds a new entry for the given data to the <a href=#drag-data-store id=the-datatransferitemlist-interface:drag-data-store-5>drag data store</a>. If the data is plain
    text  then a <var>type</var> string has to be provided also.</p>
   </dl>

  


  <h5 id=the-datatransferitem-interface><span class=secno>6.11.3.2</span> The <code>DataTransferItem</code> interface<a href=#the-datatransferitem-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem title="The DataTransferItem object represents one drag data item. During a drag operation, each drag event has a dataTransfer property which contains a list of drag data items. Each item in the list is a DataTransferItem object.">DataTransferItem</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>50+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>11+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>14+</span></span></div></div></div>

  <p>Each <code>DataTransferItem</code> object is associated with a <code>DataTransfer</code>
  object.</p>

  

  <dl class=domintro><dt><code><var>item</var>.<span id=dom-datatransferitem-kind>kind</span></code><dd>
    <p>Returns <a href=#the-drag-data-item-kind id=the-datatransferitem-interface:the-drag-data-item-kind>the drag data item kind</a>, one of: "string", 
    "file".</p>
   <dt><code><var>item</var>.<span id=dom-datatransferitem-type>type</span></code><dd><p>Returns <a href=#the-drag-data-item-type-string id=the-datatransferitem-interface:the-drag-data-item-type-string>the drag data item type string</a>.<dt><code><var>item</var>.<span id=dom-datatransferitem-getasstring>getAsString</span>(<var>callback</var>)</code><dd>
    <p>Invokes the callback with the string data as the argument, if <a href=#the-drag-data-item-kind id=the-datatransferitem-interface:the-drag-data-item-kind-2>the drag data item
    kind</a> is <i>text</i>.</p>
   <dt><code><var>file</var> = <var>item</var>.<span id=dom-datatransferitem-getasfile>getAsFile</span>()</code><dd>
    <p>Returns a <code id=the-datatransferitem-interface:file><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object, if <a href=#the-drag-data-item-kind id=the-datatransferitem-interface:the-drag-data-item-kind-3>the drag data item kind</a> is
    <i>File</i>.</p>
   </dl>

  



  <h4 id=the-dragevent-interface><span class=secno>6.11.4</span> The <code>DragEvent</code> interface<a href=#the-dragevent-interface class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/DragEvent/DragEvent title="This constructor is used to create a synthetic DragEvent object.">DragEvent/DragEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>14+</span></span><span class="chrome yes"><span>Chrome</span><span>46+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios no"><span>Safari iOS</span><span>No</span></span><span class="chrome_android no"><span>Chrome Android</span><span>No</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/DragEvent title="The DragEvent interface is a DOM event that represents a drag and drop interaction. The user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another DOM element). Applications are free to interpret a drag and drop interaction in an application-specific way.">DragEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>14+</span></span><span class="chrome yes"><span>Chrome</span><span>46+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios no"><span>Safari iOS</span><span>No</span></span><span class="chrome_android no"><span>Chrome Android</span><span>No</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>The drag-and-drop processing model involves several events. They all use the
  <code>DragEvent</code> interface.</p>

  

  <dl class=domintro><dt><code><var>event</var>.<span id=dom-dragevent-datatransfer>dataTransfer</span></code><dd><p>Returns the <code>DataTransfer</code> object for the event.</dl>

  <p class=note>Although, for consistency with other event interfaces, the <code>DragEvent</code>
  interface has a constructor, it is not particularly useful. In particular, there's no way to
  create a useful <code>DataTransfer</code> object from script, as <code>DataTransfer</code> objects
  have a processing and security model that is coordinated by the browser during drag-and-drops.</p>

  

  


  


  <h4 id=dndevents><span class=secno>6.11.5</span> Events summary<a href=#dndevents class=self-link></a></h4>

  

  <p>The following events are involved in the drag-and-drop
  model.</p>

  <table><thead><tr><th> Event name <th> Target <th> Cancelable? <th> <a href=#drag-data-store-mode id=dndevents:drag-data-store-mode>Drag data store mode</a> <th> <code id=dndevents:dom-datatransfer-dropeffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> <th> Default Action <tbody><tr><td><dfn data-dfn-for=GlobalEventHandlers,Text id=event-dnd-dragstart data-dfn-type=event><code>dragstart</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragstart_event title="The dragstart event is fired when the user starts dragging an element or text selection.">HTMLElement/dragstart_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><td><span>Source node</span><td>✓ Cancelable<td><a href=#concept-dnd-rw id=dndevents:concept-dnd-rw>Read/write mode</a>
     <td>"<code>none</code>"<td>Initiate the drag-and-drop operation<tr><td><dfn data-dfn-for=GlobalEventHandlers,Text id=event-dnd-drag data-dfn-type=event><code>drag</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event title="The drag event is fired every few hundred milliseconds as an element or text selection is being dragged by the user.">HTMLElement/drag_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><td><span>Source node</span><td>✓ Cancelable<td><a href=#concept-dnd-p id=dndevents:concept-dnd-p>Protected mode</a>
     <td>"<code>none</code>"<td>Continue the drag-and-drop operation<tr><td><dfn data-dfn-for=GlobalEventHandlers id=event-dnd-dragenter data-dfn-type=event><code>dragenter</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragenter_event title="The dragenter event is fired when a dragged element or text selection enters a valid drop target.">HTMLElement/dragenter_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><td><span>Immediate user selection</span> or <a id=dndevents:the-body-element-2 href=dom.html#the-body-element-2>the body element</a><td>✓ Cancelable<td><a href=#concept-dnd-p id=dndevents:concept-dnd-p-2>Protected mode</a>
     <td><a href=#dropEffect-initialisation>Based on <code>effectAllowed</code> value</a><td>Reject <span>immediate user selection</span> as potential <span>target element</span><tr><td><dfn data-dfn-for=GlobalEventHandlers id=event-dnd-dragleave data-dfn-type=event><code>dragleave</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragleave_event title="The dragleave event is fired when a dragged element or text selection leaves a valid drop target.">HTMLElement/dragleave_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><td><span>Previous target element</span><td>—<td><a href=#concept-dnd-p id=dndevents:concept-dnd-p-3>Protected mode</a>
     <td>"<code>none</code>"<td>None<tr><td><dfn data-dfn-for=GlobalEventHandlers id=event-dnd-dragover data-dfn-type=event><code>dragover</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event title="The dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).">HTMLElement/dragover_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><td><span>Current target element</span><td>✓ Cancelable<td><a href=#concept-dnd-p id=dndevents:concept-dnd-p-4>Protected mode</a>
     <td><a href=#dropEffect-initialisation>Based on <code>effectAllowed</code> value</a><td>Reset the <span>current drag operation</span> to "none"<tr><td><dfn data-dfn-for=GlobalEventHandlers id=event-dnd-drop data-dfn-type=event><code>drop</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event title="The drop event is fired when an element or text selection is dropped on a valid drop target. To ensure that the drop event always fires as expected, you should always include a preventDefault() call in the part of your code which handles the dragover event.">HTMLElement/drop_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><td><span>Current target element</span><td>✓ Cancelable<td><a href=#concept-dnd-ro id=dndevents:concept-dnd-ro>Read-only mode</a>
     <td><span>Current drag operation</span><td>Varies<tr><td><dfn data-dfn-for=GlobalEventHandlers,Text id=event-dnd-dragend data-dfn-type=event><code>dragend</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragend_event title="The dragend event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).">HTMLElement/dragend_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><td><span>Source node</span><td>—<td><a href=#concept-dnd-p id=dndevents:concept-dnd-p-5>Protected mode</a>
     
     <td><span>Current drag operation</span><td>Varies</table>

  <p>All of these events bubble, are composed, and the <code id=dndevents:dom-datatransfer-effectallowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> attribute always has the value it had
  after the <code id=dndevents:event-dnd-dragstart><a href=#event-dnd-dragstart>dragstart</a></code> event, defaulting to "<code>uninitialized</code>" in the <code id=dndevents:event-dnd-dragstart-2><a href=#event-dnd-dragstart>dragstart</a></code> event.</p>



  <h4 id=the-draggable-attribute><span class=secno>6.11.6</span> The <code id=the-draggable-attribute:attr-draggable><a href=#attr-draggable>draggable</a></code> attribute<a href=#the-draggable-attribute class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable title="The draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the HTML Drag and Drop API.">Global_attributes/draggable</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>2+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <p>All <a id=the-draggable-attribute:html-elements href=infrastructure.html#html-elements>HTML elements</a> may have the <dfn data-dfn-for=html-global id=attr-draggable data-dfn-type=element-attr><code>draggable</code></dfn> content attribute set. The <code id=the-draggable-attribute:attr-draggable-2><a href=#attr-draggable>draggable</a></code> attribute is an <a id=the-draggable-attribute:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with
  the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=html-global/draggable id=attr-draggable-true data-dfn-type=attr-value><code>true</code></dfn>
     <td><dfn id=attr-draggable-true-state>True</dfn>
     <td>The element will be draggable.
    <tr><td><dfn data-dfn-for=html-global/draggable id=attr-draggable-false data-dfn-type=attr-value><code>false</code></dfn>
     <td><dfn id=attr-draggable-false-state>False</dfn>
     <td>The element will not be draggable.
  </table>

  <p>The attribute's <i id=the-draggable-attribute:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-draggable-attribute:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <dfn id=attr-draggable-auto-state>Auto</dfn> state. The auto state uses the default behavior of
  the user agent.</p>

  <p>An element with a <code id=the-draggable-attribute:attr-draggable-3><a href=#attr-draggable>draggable</a></code> attribute should also have a
  <code id=the-draggable-attribute:attr-title><a href=dom.html#attr-title>title</a></code> attribute that names the element for the purpose of
  non-visual interactions. </p>

  <dl class=domintro><dt><code><var>element</var>.<span id=dom-draggable>draggable</span> [ = <var>value</var> ]</code><dd>
    <p>Returns true if the element is draggable; otherwise, returns false.</p>

    <p>Can be set, to override the default and set the <code id=the-draggable-attribute:attr-draggable-4><a href=#attr-draggable>draggable</a></code> content attribute.</p>
   </dl>

  



  

  <nav><a href=interaction.html>← 6 User interaction</a> — <a href=index.html>Table of Contents</a> — <a href=popover.html>6.12 The popover attribute →</a></nav>
